<!-- 引入notifications的模板标签 -->
{% load notifications_tags %}
{% notifications_unread as unread_count %}

<!-- 定义导航栏 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <div class="container">
        <!-- 导航栏商标 -->
        <a class="navbar-brand" href="#">诸育平—博客</a>
        <!-- 导航入口 -->
        <div>
            <ul class="navbar-nav">
                <!-- 条目 -->
                <li class="nav-item">
                    {# {% url '...' %}是Django规定的模板解耦语法，用它可以根据我们在urls.py中设置的名字，反向解析到对应的url中去 #}
                    {# 前面的article是在项目根目录的urls.py中定义的app的名称 #}
                    {# 后面的article_list是在app中的urls.py中定义的具体的路由地址 #}
                    <a class="nav-link" href="{% url 'article:article_list' %}">所有文章</a>
                </li>

                <!-- Django的 if 模板语句 -->
                {% if user.is_authenticated %}
                    <!-- 如果用户已经登录，则显示写文章、用户名下拉框 -->
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'article:article_create' %}">写文章</a>
                    </li>
                    <li class="nav-item dropdown">
                        <a href="#" class="nav-link dropdown-toggle" id="navbarDropdown" role="button"
                           data-toggle="dropdown">
                            <!-- 小红点 -->
                            {% if unread_count %}
                                <svg viewBox="0 0 8 8" width="8px" height="8px">
                                    <circle cx="4" cy="4" r="4" fill="#ff6b6b"></circle>
                                </svg>
                            {% endif %}
                            {{ user.username }}
                        </a>
                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                            <!-- 通知计数 -->
                            <a class="dropdown-item" href="{% url "notice:list" %}">通知{% if unread_count %}
                                <span class="badge badge-danger">{{ unread_count }}</span>{% endif %}
                            </a>
                            <a href="{% url "userprofile:edit" user.id %}" class="dropdown-item">个人信息</a>
                            <a href="{% url 'userprofile:logout' %}" class="dropdown-item">退出登录</a>
                            <a href="#" class="dropdown-item" onclick="user_delete()">删除用户</a>
                            <form
                                    style="display: none"
                                    id="user_delete"
                                    action="{% url 'userprofile:delete' user.id %}"
                                    method="post">
                                {% csrf_token %}
                                <button type="submit">发送</button>
                            </form>
                        </div>
                    </li>
                {% else %}
                    <!-- 如果用户未登录，则显示 “登录” -->
                    <li class="nav-item">
                        <a href="{% url 'userprofile:login' %}" class="nav-link">登录</a>
                    </li>
                {% endif %}
            </ul>
        </div>
    </div>
</nav>

<script>
    function user_delete() {
        // 调用 layer 弹窗组件
        layer.open({
            title: "确认删除",
            content: "确认删除用户资料嘛？",
            yes: function (index, layero) {
                $('form#user_delete button').click();
                layer.close(index);
            }
        })
    }
</script>